<template>
    <div class="tabs">
        <ul>
            <router-link :to="{name:'Home'}" tag="li" exact>
                <li class="listItem">
                    <div>
                        <span slot="icon" class="icon iconfont icon-shouye"></span>
                    </div>
                    <div>首页</div>
                </li> 
            </router-link>
            <router-link :to="{name:'Find'}" tag="li">
                <li class="listItem">
                    <div>
                        <span slot="icon" class="icon iconfont icon-faxian"></span>
                    </div>
                    <div>发现</div>
                </li>
            </router-link>
            <router-link :to="{name:'Me'}" tag="li">
                <li class="listItem">
                    <div>
                        <span slot="icon" class="icon iconfont icon-wode"></span>
                    </div>
                    <div>我的</div>
                </li>
            </router-link>
        </ul>
    </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: "tabBar"
};
</script>
<style lang="less" type="text/less">
.tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  & > ul,
  & > ul > li {
    margin: 0;
    padding: 0;
  }
  ul {
    display: table;
    width: 100%;
    height: 1.52rem;
    & > li {
      width: 33%;
      height: 100%;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      color: rgba(82, 82, 82, 1);
      font-weight: 400;
      line-height: 20px;
      letter-spacing: 1px;
      display: table-cell;
      cursor: pointer;
      &.router-link-active {
        color: rgba(255, 199, 38, 1);
      }
      & > div {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        color: rgba(82, 82, 82, 1);
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 1px;
        & > i {
          font-size: 14px;
          font-family: PingFangSC-Regular;
          color: rgba(82, 82, 82, 1);
          font-weight: 400;
          line-height: 20px;
          letter-spacing: 1px;
        }
      }
    }
  }
}
.listItem {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .icon {
    font-size: 18px;
  }
}
</style>
